<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

</head>
<style>
  [v-cloak] {
    display: none;
  }
</style>
<body>
  <div id="app" v-cloak>
    <!-- <div  v-for="(item,index) in list" :key="index">{{item.name}}</div> -->
    <el-button>安秀</el-button>
    <el-button type="text" @click="outerVisible = true">点击打开外层 Dialog</el-button>
    <!-- this.$refs[formName].resetFields(); -->
    <div style="display:flex">
      <el-button @click="handleSizeChange()" :disabled="show">上一页</el-button>
    <div v-for="(item,index) in arr">
<div v-for="(nitem,nindex) in pageList">
      <el-input v-model="item.value" v-show ='item.name ==nitem.name'></el-input>
      <div style="margin-left:50px" v-show ='item.name ==nitem.name' >{{item.name}}</div>
      
    </div>
   </div>
   <el-button @click="handleCurrentChange()" :disabled="hidden">下一页</el-button>
   <el-button @click="click(arr)" >baocu</el-button>
    </div>
  </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data() {
      return {
        value:'',
        arr:[
          {
            name:'1',
            value:''
          },
          {
            name:'2',
            value:''
          },
          {
            name:'3',
            value:''
          },
          {
            name:'4',
            value:''
          },
          {
            name:'5',
            value:''
          },
          {
            name:'6',
            value:''
          },
        ],
        dynamicValidateForm: {
          domains: [
            {
            name: ''
          },
          {
            name: ''
          },
          {
            name: ''
          }
        ]},
        outerVisible: false,
        innerVisible: false,
        totalPage:'',
        pageList:[],
        pageSize:2,
        currentPage:1,
        totolPage:undefined,
        hidden:false,
        show:true,
        id:''
      }
    },
    created() {
     this.arr.forEach(element => {
         			// 总数据就是总页数
			this.totalPage = this.arr.length
            // 给加分页列表初始化
            let temp = JSON.parse(JSON.stringify(this.arr))
            // 因为splice不是纯函数会改变源数据结果这里temp一下，记得Stringify不然也会改变源数据
            this.pageList =  temp.slice(0,this.pageSize)
            this.totolPage = this.totalPage/this.pageSize

     });
  },
  methods:{
    click(val){
      console.log(val)
    },
    handleSizeChange(val) {
      this.hidden = false
      // 只要换页数就直接返回1页
      this.currentPage--
      //求此页最大的下标（不包含）
      let endPageData = (this.currentPage) * this.pageSize;
      //求此页的最小下标
      // let starPageDate=endPageData-this.pageSize
      //截取
      this.pageList = this.arr.slice(endPageData-this.pageSize, endPageData);
      if(this.currentPage == 1) {
        this.show = true
      }
    },
    handleCurrentChange(val) {
      this.show=false
      this.currentPage++
      // this.currentPage = val;
      // // 当前页 - 1 * 页数 = 分割开始数 比如二页 - 1  = 1*page
      let currentPage = (this.currentPage- 1) * this.pageSize;
      // // 分割结束数 = 分割开始数 + this.pageSize
      this.pageList = this.arr.slice(currentPage, currentPage + this.pageSize);
      if(this.totolPage == this.currentPage) {
        this.hidden = true
      }
    },

  }
  })
</script>
